<template>
  <div class="demo-block">
    <h4>基本用法</h4>
    <div class="demo-row">
      <my-button>默认按钮</my-button>
      <my-button type="primary">主要按钮</my-button>
      <my-button type="success">成功按钮</my-button>
      <my-button type="info">信息按钮</my-button>
      <my-button type="warning">警告按钮</my-button>
      <my-button type="danger">危险按钮</my-button>
      <my-button type="dark">暗黑按钮</my-button>
    </div>
    <div class="demo-row">
      <my-button outline>边框按钮</my-button>
      <my-button type="primary" outline>主要按钮</my-button>
      <my-button type="success" outline>成功按钮</my-button>
      <my-button type="info" outline>信息按钮</my-button>
      <my-button type="warning" outline>警告按钮</my-button>
      <my-button type="danger" outline>危险按钮</my-button>
      <my-button type="dark" outline>暗黑按钮</my-button>
    </div>
    <div class="demo-row">
      <my-button round>圆角按钮</my-button>
      <my-button type="primary" round>主要按钮</my-button>
      <my-button type="success" round>成功按钮</my-button>
      <my-button type="info" round>信息按钮</my-button>
      <my-button type="warning" round>警告按钮</my-button>
      <my-button type="danger" round>危险按钮</my-button>
      <my-button type="dark" round>暗黑按钮</my-button>
    </div>
  </div>
</template>

<script>
import button from "../../../../src/components/button";
export default {
  components: {
    "my-button": button,
  },
};
</script>

<style scoped>
.demo-row {
  margin: -10px;
}
</style>